<template>
  <div class="card">
    <v-navigation-drawer permanent app>
      <v-list-item>
        <v-list-item-content>
          <v-list-item-title class="title">
            Card
          </v-list-item-title>
          <v-list-item-subtitle v-if="card.cardNo">
            {{card.cardNo}}
          </v-list-item-subtitle>
        </v-list-item-content>
      </v-list-item>

      <v-divider></v-divider>

      <v-form v-model="valid" ref="loginForm" v-if="!card.cardNo">
        <v-list>
          <v-list-item>
            <v-text-field
              label="Card No."
              v-model="loginForm.cardNo"
              :rules="rules.cardNo"
            ></v-text-field>
          </v-list-item>
          <v-list-item>
            <v-text-field
              label="PIN"
              v-model="loginForm.password"
              type="password"
              :rules="rules.password"
            ></v-text-field>
          </v-list-item>
          <v-list-item>
            <v-spacer/>
            <v-btn text
              @click="handleCardLogin"
              :loading="loading"
            >Login</v-btn>
          </v-list-item>
        </v-list>
      </v-form>
      <v-list
        dense
        nav
        v-show="card.cardNo"
      >
        <v-list-item
          v-for="item in items"
          :key="item.title"
          link
          :to="'/card/' + item.to"
        >
          <v-list-item-icon>
            <v-icon>{{ item.icon }}</v-icon>
          </v-list-item-icon>

          <v-list-item-content>
            <v-list-item-title>{{ item.title }}</v-list-item-title>
          </v-list-item-content>
        </v-list-item>
        <v-list-item @click="handleCardLogout">
          <v-list-item-icon><v-icon>mdi-logout-variant</v-icon></v-list-item-icon>
          <v-list-item-content>
            <v-list-item-title>Logout</v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>
    <v-container>
      <router-view/>
    </v-container>
  </div>
</template>

<script>
  export default {
    name: 'stock',
    data: () => ({
      loginForm: {
        cardNo: null,
        password: null,
      },
      items: [
        { title: 'Balance', icon: 'mdi-cash-100', to: 'balance' },
        // { title: 'Transfer', icon: 'mdi-bank-transfer', to: 'transfer' },
        // { title: 'Transaction', icon: 'mdi-format-list-bulleted', to: 'transaction' },
        { title: 'Profile', icon: 'mdi-account', to: 'profile' },
      ],
      valid: false,
      rules: {
        cardNo: [
          v => !!v || 'Required',
          v => v && /^\d{16}$/.test(v) || 'Must be 16 numbers long'
        ],
        password: [
          v => !!v || 'Required',
          v => v && /^\d{6}$/.test(v) || 'Must be 6 numbers long'
        ]
      },
      loading: false,
    }),
    computed: {
      card() {
        return this.$store.getters.card;
      }
    },
    methods: {
      handleCardLogout() {
        this.$store.dispatch('card/logout').then(() => {
          // console.log(this.$store.state.card);
          this.$router.push('/card');
          Object.keys(this.loginForm).forEach(k => this.loginForm[k] = null);
        })
      },
      handleCardLogin() {
        this.loading = true;
        this.$store.dispatch('card/authenticate', this.loginForm).then(card => {
          if (card) this.$router.push('/card/balance');
        }).catch(err => this.$toasted.error(err)).finally(() => this.loading = false);

      }
    }
  };
</script>
